<template>
  <view>
    <Table ref="table" :fetchData="fetchData" :autoFetch="false">
      <template #default="{ data }">
        <view v-for="(item,index) in data" :key="index">
          <Card
            :stateColor="colors[item.governCheckResult]"
            :stateColorFf="'#fff'"
            :colorsFf="'orange'"
            :paddingFf="'0'"
            @click="cardClick(item)"
            :title="item.governCheckName"
            :ff="item.checkPlanName"
            :fr="`${item.governTaskStartTime} 至 ${item.governTaskEndTime}`"
            :content="item.governCheckContent"
            :state="item.governCheckResult"
            v-if="item.governTaskPlanItemId !== activeId"
            >
          </Card>

          <uni-card v-else>
            <view class="button-box">
              <uni-icons type="closeempty" class="close" size="30" @click="fClose"></uni-icons>
              <button class="mini-btn" type="primary" size="mini" @click="fGetDetail(item)">查看</button>
              <button :disabled="item.submitStatus == 2" :class="item.submitStatus == 2 ? 'bgGray' : 'bgOrange'" class="mini-btn" type="primary" size="mini" @click="fFixCheckTaskItemStatus(0, item)">符合</button>
              <button :disabled="item.submitStatus == 2" :class="item.submitStatus == 2 ? 'bgGray' : 'bgOrange'" class="mini-btn" type="primary" size="mini" @click="fFixCheckTaskItemStatus(1, item)">不符合</button>
            </view>
          </uni-card>
        </view>
      </template>
    </Table>
  </view>
</template>
<script>
export default {
  data() {
    return {
      row: {},
    };
  },
  onLoad(payload) {
    if (payload.row) {
      this.row = JSON.parse(decodeURIComponent(payload.row));
    }
  },
};
</script>
<script setup>
import { ref, onActivated, getCurrentInstance, reactive, onMounted } from "vue";
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/yhpc/pcjhrw.js";
import { router } from "@/router/index.js";
import { PATH } from "../paths";
import Card from "@/components/Card.vue";

const colors = ref({
  未排查: "#e0c59f",
  已排查: "#8888ff",
  已超时: "#ff8888",
});
  
const activeId = ref('');
const parentNode = ref({});
const filterForm = reactive({
  type: 0   // 0: 企业自主检查
});

const table = ref();
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS,
  filterForm,
});
onMounted(() => {
  const { row } = getCurrentInstance().data;
  parentNode.value = row;
  // queryParams.value.checkTaskConfigId = row.id;
  // filterForm.checkTaskConfigId = row.id;
  getList();
});
onShow(() => {
  const { row } = getCurrentInstance().data;
  parentNode.value = row;
  // queryParams.value.checkTaskConfigId = row.id;
  // filterForm.checkTaskConfigId = row.id;
  getList();
});

const cardClick = (item) => {
  // router.toPage({
  //   path: PATH.PCRWJHDETAIL,
  //   params: {
  //     row: JSON.stringify({ ...item }),
  //     id: item.id,
  //   },
  // });
  activeId.value = item.governTaskPlanItemId
};

const fClose = (item) => {
  activeId.value = ''
}

const fGetDetail = (item) => {
  router.toPage({
    path: PATH.PCRWJHDETAIL,
    params: {
      id: item.governTaskPlanItemId
    }
  });
}

const fFixCheckTaskItemStatus = (type, item) => {
  if(type === 1){  // 不符合
    let { governTaskPlanId, governCheckTaskItemId, governCheckTaskId, governCheckName, governCheckContent, governCheckBasis, governCheckWay, governApplicablePlace, governTaskPlanItemId } = item
    let data = {
      governTaskPlanId,
      governCheckTaskItemId,
      governCheckTaskId,
      governCheckName,
      governCheckContent,
      governCheckBasis,
      governCheckWay,
      governApplicablePlace,
      governTaskPlanItemId,
      isAdd: true
    }
    uni.navigateTo({
      url: `/pages/zxjc/yhgl/index?type=qyzzjc&row=${decodeURIComponent(JSON.stringify(data))}`
    })
  }else{
    let data = {
      governTaskPlanItemId: item.governTaskPlanItemId,
      governCheckConform: type  // 0符合 1不符合 2待定中  默认null
    }
    APIS.fixCheckTaskItemStatus(data).then(res => {
      if(res.code === 200){
        setTimeout(() => {
          uni.showToast({
            title: '操作成功！',
            icon: 'success',
            duration: 2000
          })
        }, 500);
        fClose()
        getList() 
      }
    })
  }
}

const formathour = (item) => {
  if (item.checkState == "已排查") {
    return "剩余:0";
  }
  const nowNum = Date.now();
  const times = new Date(item.taskEndTime).getTime();

  let seconds = (times - nowNum) / 1000;
  let text = "剩余:";
  if (seconds > 0) {
    if (seconds >= 3600) {
      let hour = (seconds / 3600).toFixed(1);
      text += hour + "小时";
    } else {
      let hour = (seconds / 60).toFixed(1);
      text += hour + "分钟";
    }
  } else {
    text = "已超时";
  }
  return text;
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
  }
}

.button-box {
  position: relative;
  // display: flex;
  padding-right: 20rpx;

  .bgOrange{
    background: #e6a23c;
  }
  .bgGray{
    color: #999;
    background: #e1e1e1;
    &::after{
      border-color: #e1e1e1;
    }
  }

  .mini-btn {
    width: 140rpx;
    margin: 0 15upx;
    padding: 0 !important;
    // font-size: 24upx;
  }

  .close {
    position: absolute;
    top: -5rpx;
    right: -32rpx;
    color: skyblue !important;
  }
}

.card-footer-f{
  background: none !important;
}
</style>
